<template>
  <div>
    <Header>
      <template v-slot:title> 个人信息 </template>
    </Header>
    <van-action-sheet
      v-model="show"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    >
      <template #default>
        <van-uploader class="chuan" :after-read="success">
          <template #default>
            <div class="zh">拍照</div>
            <div class="zh">上传头像</div>
          </template>
        </van-uploader>
      </template>
    </van-action-sheet>
    <van-uploader v-show="show1"> </van-uploader>
    <ul>
      <li class="li1" @click="Upimg">
        <p style="font-size: 0.5rem">头像</p>
        <p>
          <img :src="list.avatar" alt="" /><van-icon
            style="font-size: 0.5rem"
            name="arrow"
          />
        </p>
      </li>
      <li @click="$router.push('/setinfo?name=' + list.nickname)">
        <p style="font-size: 0.5rem">昵称</p>
        <p style="font-size: 0.5rem">
          {{ list.nickname }}
          <van-icon style="font-size: 0.5rem" name="arrow" />
        </p>
      </li>
      <li>
        <p style="font-size: 0.5rem">手机号</p>
        <p style="font-size: 0.5rem">{{ list.mobile }}</p>
      </li>
      <li @click="$router.push('/setsex?sex=' + list.sex)">
        <p style="font-size: 0.5rem">性别</p>
        <p style="font-size: 0.5rem">
          {{ !list.sex ? "男" : "女" }}

          <van-icon style="font-size: 0.5rem" name="arrow" />
        </p>
      </li>
      <li @click="showArea = true">
        <p style="font-size: 0.5rem">日期选择</p>
        <p style="font-size: 0.5rem">
          {{ list.birthday }}

          <van-icon style="font-size: 0.5rem" name="arrow" />
        </p>
      </li>
      <van-popup v-model="showArea" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          v-show="showArea"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="times"
          @cancel="showArea = false"
        />
      </van-popup>

      <li @click="showArea1 = true">
        <p style="font-size: 0.5rem">位置选择</p>
        <p style="font-size: 0.5rem">
          {{ list.province_name }}, {{ list.city_name }},
          {{ list.district_name }}

          <van-icon style="font-size: 0.5rem" name="arrow" />
        </p>
      </li>

      <van-popup v-model="showArea1" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea1 = false"
        />
      </van-popup>
      <li @click="$router.push('/subjects')">
        <p style="font-size: 0.5rem">学科</p>
        <p style="font-size: 0.5rem">
          <van-icon style="font-size: 0.5rem" name="arrow" />
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import Header from "../Main/header";
import { xinxis, imgs, users } from "../../Request/http.js";
import dayjs from "dayjs";
export default {
  components: { Header },
  name: "EverydayInfo",

  data() {
    return {
      value1: "", //日历的 birthday
      value: "", //province_name,city_name,district_name
      showArea: false, //日期
      showArea1: false, //位置
      areaList, //城市选择器
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      show: false,
      actions: [{ name: "拍照" }],
      list: [],
      show1: false, //照片的上传
    };
  },

  mounted() {
    this.apply();
  },

  methods: {
    apply() {
      xinxis().then((res) => {
        console.log(res);
        this.list = res;
      });
    },
    times(value) {
      console.log(value);
      users({ birthday: dayjs(value).format("YYYY-MM-DD") }).then((res) => {
        console.log(res);
        this.$nextTick(function () {
          this.apply();
          this.showArea = false;
        });
      });
    },
    Upimg() {
      this.show = true;
    },
    success(file) {
      console.log(file.file); 
      var obj = new FormData();
      obj.append("file", file.file);  
      imgs(obj).then((res) => {
        console.log(res,'345678');
        users({ avatar: res.path }).then((res) => {
          console.log(res);
          this.$nextTick(function () {
            this.apply();
          });
        });
          this.show = false;
      });
    },
    onSelect() {
      this.show = false;
    },
    onConfirm(values) {
      console.log(values);
      var obj = [];
      values.forEach((item) => {
        obj.push(item.code);
      });
      users({ province_id: obj[0], city_id: obj[1], district_id: obj[2] }).then(
        (res) => {
          console.log(res);
          this.$nextTick(function () {
            this.apply();
          });
        }
      );
      this.showArea1 = false;
    },
    onCancel() {
      Toast("取消");
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  background: #fff;
  .li1 {
    margin: 0 0.5rem 0.5rem 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    img {
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      margin-bottom: -0.2rem;
    }
  }
  li {
    margin: 0 0.5rem 0.5rem 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
}
.zh {
  margin-left: 157px;
  height: 40px;
  font-size: 15px;
  margin-top: 6px;
  text-align: center;
}
.chuan {
  width: 100%;
  display: inline-block;
}
</style>
